<template>
    <div id="businessView">
        <a-form :model="queryForm" layout="inline" style="width: 100%;background-color: white">
            <a-form-item field="title" label="名称" style="min-width: 240px">
                <a-input v-model="queryForm.businessName" placeholder="请输入名称"/>
            </a-form-item>
            <a-form-item field="tags" label="地址" style="min-width: 240px">
                <a-input v-model="queryForm.businessAddress" placeholder="请输入地址"/>
            </a-form-item>
            <a-form-item>
                <a-button type="primary" @click="doSubmit">搜索</a-button>
            </a-form-item>
            <a-form-item>
                <a-button type="primary" @click="handleClick">新增商家</a-button>
            </a-form-item>
        </a-form>
        <a-divider size="0"/>
        <a-table
                :ref="tableRef"
                :columns="columns"
                :data="dataList"
        >
            <template #businessImg="{ record }">
                <img width="30" height="30" :src=record.businessImg alt="">
            </template>
            <template #tags="{ record }">
                <a-space wrap>
                    <a-tag v-for="(tag, index) of record.tags" :key="index" color="green"
                    >{{ tag }}
                    </a-tag>
                </a-space>
            </template>
            <template #starPrice="{ record }">
                {{
                record.starPrice.toFixed(1)
                }}
            </template>
            <template #deliveryPrice="{ record }">
                {{
                record.deliveryPrice.toFixed(1)
                }}
            </template>
            <template #businessWeight="{ record }">
                {{
                record.businessWeight.toFixed(1)
                }}
            </template>
            <template #createTime="{ record }">
                {{
                moment(record.createTime).format("YYYY-MM-DD")
                }}
            </template>
            <template #optional="{ record }">
                <a-space>
<!--                    <a-button type="primary" status="success" size="mini" shape="circle">-->
<!--                        <icon-edit/>-->
<!--                    </a-button>-->
                    <a-button @click="router.push({path:`/analyse/businessInfo/${record.id}`})" type="primary" status="warning" size="mini" shape="circle">
                        <icon-fire/>
                    </a-button>
<!--                    <a-button type="primary" status="danger" size="mini" shape="circle">-->
<!--                        <icon-delete/>-->
<!--                    </a-button>-->
                </a-space>
            </template>
        </a-table>
        <BusinessModalForm :visible="visible"/>
    </div>
</template>
<script setup lang="ts">
import {onMounted, reactive, ref, watch, watchEffect} from "vue";
import moment from "moment";
import {useRouter} from "vue-router";
import {BusinessQueryDTO, BusinessVO} from "../type/business";
import {getRecommendBusinessAPI} from "../service/business.ts";
import {IconEdit, IconFire, IconDelete} from '@arco-design/web-vue/es/icon';
import BusinessModalForm from "../components/BusinessModalForm.vue";

const tableRef = ref();
const visible = ref<Boolean>(false);
const dataList = ref<BusinessVO[]>([]);
const queryForm = ref<BusinessQueryDTO>({
    businessAddress:"",
    businessName:""
})

const handleClick = () => {
    visible.value = true;
};
const columns = [
    {
        title: "ID",
        dataIndex: "id",
    },
    {
        title: "店名",
        dataIndex: "businessName",
    },
    {
        title: "商家图片",
        slotName: "businessImg",
    },
    {
        title: "类型",
        slotName: "tags",
    },
    {
        title: "地址",
        dataIndex: "businessAddress",
    },
    {
        title: "起送费",
        slotName: "starPrice",
    },
    {
        title: "配送费",
        slotName: "deliveryPrice",
    },
    {
        title: "推荐权重",
        slotName: "businessWeight",
    },
    {
        title: "注册时间",
        slotName: "createTime",
    },
    {
        slotName: "optional",
    },
];

const loadData = async () => {
    const res = await getRecommendBusinessAPI(queryForm.value);
    dataList.value = res.data;
};
/*
* 条件更换
* */
watchEffect(() => {
    loadData();
});

/**
 * 页面加载时，请求数据
 */
onMounted(() => {
    loadData();
});



/**
 * 确认搜索，重新加载数据
 */
const doSubmit = () => {
    // 这里需要重置搜索页号
    queryForm.value = {
        ...queryForm.value,
    };
};

const router = useRouter();

</script>

<style scoped></style>
